<template>
	<view class="app-goods-banner" v-if="picList.length > 0">

		<!-- #ifdef MP-WEIXIN -->
		<view class='account-box' v-if='mallConfig.mall.setting.is_official_account == 1'>
			<official-account></official-account>
		</view>
		<!-- #endif -->

		<swiper class="swiper" v-bind:autoplay="autoplay" v-bind:indicator-dots="picList.length>1" circular
			@change='bannerChange' indicator-color="rgba(255,255,255,.3)" indicator-active-color="#30353c">
			<!-- #ifndef MP-BAIDU -->
			<swiper-item
				v-if="videoUrl && getVideo == 1 && sign !== 'lottery' && sign !== 'bargain' && sign !== 'community'">
				<view class="swiper-img" @click="routeJumpT"
					v-bind:style="{backgroundImage: 'url(' + picList[0].pic_url + ')'}">
					<image class="video-play" src="/static/image/video-play.png"></image>
				</view>
			</swiper-item>
			<!-- #endif-->

			<swiper-item v-for="(item, index) in picList" v-bind:key="index">
				<view class="swiper-img" v-bind:style="{backgroundImage: 'url(' + item.pic_url + ')'}"
					@click="clickImage(index)">

					<!-- #ifndef MP-BAIDU -->
					<app-video v-if="index === 0 && videoUrl && getVideo == 0" height="750rpx"
						v-bind:pic-url="item.pic_url" v-bind:url="videoUrl" v-on:video-start="videoStart"
						v-on:tap.native.stop="preventD"></app-video>
					<app-video
						v-if="index === 0 && videoUrl && getVideo == 1 && (sign === 'lottery' || sign === 'bargain' || sign === 'community')"
						height="750rpx" v-bind:pic-url="item.pic_url" v-bind:url="videoUrl"
						v-on:video-start="videoStart" v-on:tap.native.stop="preventD"></app-video>
					<!-- #endif -->

					<!-- #ifdef MP-BAIDU-->
					<app-video v-if="index === 0 && videoUrl" height="750rpx" v-bind:pic-url="item.pic_url"
						v-bind:url="videoUrl" v-on:video-start="videoStart" v-on:tap.native.stop="preventD"></app-video>
					<!-- #endif -->

				</view>
			</swiper-item>
		</swiper>
		<!-- 购物车悬浮 11.12 注释 -->
		<!-- <view>
			<app-jump-button url="/pages/cart/cart" v-if="isCart">
				<view class="cart" v-bind:style="{'top': isScanQrCode ? '250rpx' : '60rpx'}">
					<image load-lazy src="../../../static/image/icon/nav-icon-cart.png"></image>
				</view>
			</app-jump-button>
		</view> -->
		<!-- 录播悬浮 10.18 10.22注释 11.10 -->
		<view class="" v-if="videoPageurl != '暂无'">
			<app-jump-button :url="videoPageurl">
				<view class="recorde" style="top: 150rpx;">
					<image load-lazy src="/static/image/1.gif"></image>
					<view class="">
						视频
					</view>
					<view class="">
						{{watchnum}}人观看
					</view>
				</view>
			</app-jump-button>
		</view>
		<!-- <view class="share-commission dir-left-nowrap cross-center" v-if="share > 0">
			<image load-lazy src="../../../static/image/icon/share/share_commission.png"></image>
			<view class="text">
				<view>分销最高可赚</view>
				<view>￥{{share}}</view>
			</view>
		</view> -->
		<!-- 9.28 送金币 11.12 黄金 && !ishj -->
		<view class="sendgold">
			<view class="sendcoin" v-if="!ishj && mall_id == 1">
				金币最高可抵{{goods.original_discount_price1}}元
			</view>
			<view class="sendcoin" v-if="!ishj && mall_id == 1">
				抵后价{{goods.original_price-goods.original_discount_price1}}元
			</view>
			<view class="sendcoin" v-if="goods_gold && mall_id == 1">
				成交后送{{goods_gold}}金币
			</view>
		</view>
	</view>
</template>

<script>
	import appVideo from "../../page-component/app-video/app-video.vue";
	import {
		mapState,
		mapGetters
	} from 'vuex';

	export default {
		components: {
			'app-video': appVideo
		},
		props: {
			goods: Object,
			picList: {
				type: Array,
				default () {
					return []
				}
			},
			share: {
				type: Number
			},
			isCart: {
				type: Boolean,
				default () {
					return true;
				}
			},
			// 10.27 视频详解
			videoUrl: {
				type: String
			},
			// 11.10 多少人观看
			watchnum: {
				type: Number
			},
			videoPageurl: {
				type: String,
				default: '暂无'
			},
			goods_id: {
				type: Number
			},
			sign: {
				type: String
			},
			goods_gold: {
				type: String
			},
			// 11.12 是否黄金
			ishj: {
				type: Boolean,
				default () {
					return true;
				}
			},
			// 商城id
			mall_id: {
				type: Number,
				default: 1
			}
		},
		data() {
			return {
				autoplay: true
			};
		},
		methods: {
			bannerChange() {
				this.$event.trigger(this.$const.EVENT_VIDEO_END);
			},
			videoStart(videoStatus) {
				videoStatus ? this.autoplay = false : this.autoplay = true;
			},
			preventD() {},
			clickImage(index) {
				let urls = [];
				this.picList.forEach(item => {
					urls.push(item.pic_url);
				});
				uni.previewImage({
					current: index,
					urls: urls
				});
			},
			// #ifndef MP-BAIDU
			routeJumpT() {
				uni.navigateTo({
					url: `/pages/goods/video?goods_id=${this.goods_id}&sign=${this.sign}`
				})
			}
			// #endif
		},
		computed: {
			...mapState({
				// #ifdef MP-WEIXIN
				mallConfig: state => state.mallConfig,
				// #endif
				isScanQrCode: state => state.page.isScanQrCode
			}),
			// #ifndef MP-BAIDU
			...mapGetters('mallConfig', {
				getVideo: 'getVideo'
			}),
			// #endif
		},

	}
</script>

<style scoped lang="scss">
	.app-goods-banner {
		position: relative;
		width: 750upx;
	}

	.cart {
		position: fixed;
		right: #{24rpx};
		top: #{60rpx};
		background: rgba(255, 255, 255, 0.5);
		font-size: 0;
		padding: #{20rpx};
		border-radius: #{999rpx};
		box-shadow: 0 #{1rpx} #{3rpx} rgba(0, 0, 0, 0.2);
		z-index: 100;

		image {
			width: #{42rpx};
			height: #{42rpx};
		}
	}

	.recorde {
		position: fixed;
		right: #{24rpx};
		top: #{60rpx};
		background: rgba(255, 255, 255, 0.5);
		font-size: 24rpx;
		padding: #{20rpx};
		border-radius: 4rpx;
		box-shadow: 0 #{1rpx} #{3rpx} rgba(0, 0, 0, 0.2);
		z-index: 100;
		// 10.19
		// display: flex;
		// align-items: center;
		// justify-content: space-around;
		// flex-direction: column;
		text-align: center;

		image {
			width: #{42rpx};
			height: #{42rpx};
		}
	}

	.share-commission {
		height: #{80rpx};
		width: #{220rpx};
		position: absolute;
		right: 0;
		bottom: #{80rpx};
		border-top-left-radius: #{40rpx};
		border-bottom-left-radius: #{40rpx};
		background-color: rgba(0, 0, 0, 0.4);
		z-index: 100;

		image {
			width: #{44rpx};
			height: #{44rpx};
			margin-right: #{14rpx};
			margin-left: #{20rpx};
		}

		.text {
			color: #ffffff;
			font-size: $uni-font-size-weak-two;
		}
	}

	.swiper {
		height: #{750rpx};

		.swiper-img {
			width: 100%;
			height: #{750rpx};
			// background-size: cover;
			background-size: 100% 100%;
			background-repeat: no-repeat;
			background-position: center;
			position: relative;
		}
	}

	.video-play {
		width: #{128upx};
		height: #{128upx};
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.sendgold {
		position: absolute;
		bottom: 10rpx;
		right: 10rpx;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.sendcoin {
		width: fit-content;
		background-color: #ff0000;
		color: #FFFFFF;
		font-size: 24rpx;
		padding: 4rpx 8rpx;
		border-radius: 32rpx;

		&+.sendcoin {
			margin-top: 2rpx;
		}
	}
</style>
